<template>
    <div class="container" style="text-align:center;margin-top:150px;">
        <a class="registrePath" @click="uploadBase('base')" v-show="form711">表711</a>&nbsp;&nbsp;
        <a class="registrePath" @click="uploadBase('711-1')"  v-show="form7111">表711-1</a>&nbsp;&nbsp;
        <a class="registrePath" @click="uploadBase('711-2')"  v-show="form7112">表711-2</a>&nbsp;&nbsp;
        <a class="registrePath" @click="uploadBase('711-3')"  v-show="form7113">表711-3</a>&nbsp;&nbsp;
        <a class="registrePath" @click="uploadBase('711-4')"  v-show="form7114">表711-4</a>&nbsp;&nbsp;
        <a class="registrePath" @click="uploadBase('711-5')"  v-show="form7115">表711-5</a>&nbsp;&nbsp;
        <a class="registrePath" @click="uploadBase('711-6')"  v-show="form7116">表711-6</a>
        <div>
            <!-- base表弹框 -->
            <div>
                <el-dialog  :visible.sync="baseFormVisible" :show-close ='false'>
                    <el-upload
                    class="avatar-uploader"
                    :multiple="true"
                    :action="actionPath"
                    :data="postData"
                    :file-list="fileList"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    :on-remove="handleRemove"
                    >
                    <a class="registrePath" slot="trigger" size="small" type="primary">选取文件</a>
                    </el-upload>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancelSubmitBase">取 消</el-button>
                    <el-button type="primary" @click="submitBase">确 定</el-button>
                </div>
                </el-dialog>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            form711:false,
            form7111:false,
            form7112:false,
            form7113:false,
            form7114:false,
            form7115:false,
            form7116:false,

            baseFormVisible:false,//base表
            fileList:[],//已上传列表
            listBase:[],//确定时传给后台数据
            postData:{},//上传七牛云数据
            actionPath:'http://upload.qiniup.com',
            domain:'',//后台token数据
            key:'',//七牛云返回数据
            value:''//选择上传表

        }
        
    },
    mounted:function(){
        this.getForms();
    },
    methods:{
        //获取填表内容
        getForms(){
                let Beid = this.$store.get("type");
                let id = Beid.toString();
                switch(id){
                    case "1":
                    this.form711 = true;
                    break;
                    case "2":
                    this.form711 = true;
                    this.form7111 = true;
                    this.form7112 = true;
                    this.form7115 = true;
                    this.form7116 = true;
                    break;
                    case "3":
                    this.form711 = true;
                    this.form7111 = true;
                    this.form7112 = true;
                    break;
                    case "4":
                    this.form711 = true;
                    this.form7112 = true;
                    this.form7113 = true;
                    this.form7115 = true;
                    this.form7116 = true;
                    break;
                    case "5":
                    this.form711 = true;
                    this.form7112 = true;
                    this.form7113 = true;
                    break;
                    case "6":
                    this.form711 = true;
                    this.form7112 = true;
                    this.form7114 = true;
                    this.form7115 = true;
                    this.form7116 = true;
                    break;
                    case "7":
                    this.form711 = true;
                    this.form7112 = true;
                    this.form7114 = true;
                    break;
                }
            },
        uploadBase(value){
            this.baseFormVisible = true;
            this.value = value;
            console.log(value);
        },
        handleAvatarSuccess(res, file) {
            this.key = res.key;
            let data ={};
            data.url = this.domain+'/'+this.key;
            this.listBase.push(data);
        },
        beforeAvatarUpload(file) {
            let type = file.name.split(".")[1];
            const isLt2M = file.size / 1024 / 1024 < 4;
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 4MB!');
            return;
            }
            //return isJPG && isLt2M;
            let self = this;
            $.ajax({
            url:this.$ajaxUrl+'/qiniu/token?name='+this.$store.get('unitDetailedName')+'&type=2&suffix=.'+type,
            type:'GET', //GET
            async:false,    //或false,是否异步
            timeout:5000,    //超时时间
            dataType:'json',    //返回的数据格式：
            beforeSend:function(xhr){
            },
            success:function(data,textStatus,jqXHR){
                if(data.status === 200){
                    self.postData.token = data.data.token;
                    self.postData.key = data.data.imgUrl;
                    self.domain = data.data.domain;
                }else{
                    self.$message.error(data.message);
                }
            
            },
            });
       
      },
      //提交base表
    submitBase(){
            let self = this;
            if(this.listBase.length !=0){
                console.log(this.listBase);
                this.$http({
                method:'post',
                url:'/qiniu/insertImages?name='+this.value+'&invId='+this.$store.get("companyId"),
                data:self.listBase,
                }).then(function(res){
                    let data = res.data;
                    if(data.status === 200){
                        self.$message({
                            message: data.message,
                            type: 'success',
                            duration:1000
                        });
                        self.baseFormVisible = false;
                        self.value='';
                        self.fileList=[];
                        self.listBase=[];

                    }else{
                        self.$message.error(data.message);
                    }
                }).catch(function(err){
                    console.log(err)
                })
            }else{
                self.$message.error("请先上传文件");
            }
            
     },
     //清空弹框
    cancelSubmitBase(){
        this.baseFormVisible = false;
        this.fileList=[];
        this.listBase=[];
        this.value='';

            
        },
        //删除已上传列表
    handleRemove(file, fileList){
        let testKey = file.response.key;
        for(var i = 0;i<this.listBase.length;i++){
            if(this.listBase[i].url.split('/')[1] === testKey){
                this.listBase.splice(i,1);
            }
        }
    },
    },
   
}
</script>
